<!-- 工时统计日报 -->
<template>
	<div id="big">
		<div id="r1">
			<span class="name1">查询项目：统计日工时</span>
<!-- 				<span class="name1">项目</span>
				<select class="name1" v-model="param.name" >
				  <option class="name1" v-for="project in list" :value="project.projectName">{{project.projectName}}</option>
				</select> -->
				<span class="name1">开始时间</span>
				<input class="name1" type="date" v-model="param.time1"/><span class="name1">~</span>
				<span class="name1">结束时间</span>
				<input class="name1" type="date" v-model="param.time2"/>
				<input class="name1" type="button"  value="查询" @click="check()"/>
				<!-- <input class="name1" type="button" value="导出" /> -->
			</div>
			<div id="r2">
			<table  id="table">
				<tr >
					<td colspan="6">工时日报统计</td>
				</tr>
				<tr>
					<td>缺陷编号</td>
					<td>实际耗时</td>
					<td>开始处理时间</td>
					<td>处理完成时间</td>
					<td>当前进度</td>
					<td>处理人</td>
				</tr>
				<tr v-for="dealtime in list1">
					<td>{{dealtime.bugId}}</td>
					<td>{{dealtime.rtime}}</td>
					<td>{{dealtime.starttime}}</td>
					<td>{{dealtime.endtime}}</td>
					<td>{{dealtime.recordState}}</td>
					<td>{{dealtime.dealbyName}}</td>
				</tr>
				<tr>
					<td colspan="2"><input type="button" value="上一页" @click="last()"></td>
					<td colspan="2">当前第<span>{{pageInfo.current}}</span>页,共<span>{{pageInfo.pages}}</span>页</td>
					<td colspan="2"><input type="button" value="下一页" @click="next()"></td>
				</tr>		
			</table>
			</div>
	</div>
</template>

<script>
	import $ from "jquery";
	export default {
		name:"Bugstate",
		data(){
			return{
				list:[],
				list1:[],
				param:{
					name:"",
					time1:"",
					time2:"",
					pageNum:"1",
					pageSize:"5",
				},	
				pageInfo:{
					current:"",
					pages:"",
					
				},	
			}						
		},
		methods:{
			check(){
				var _this=this;
				$.ajax({
					url:"http://localhost/workingHours/day",
					type:"get",
					data:_this.param,
					headers: {"token": localStorage.getItem("token")},
					dataType:"json",
					success:function(data){
						if(data.code=="0000"){
							_this.list1=data.list;	
							_this.pageInfo=data.obj;
						}
					}										
				})
			},
			last(){
				var _this=this;
				if(_this.pageInfo.current>1){
					_this.pageInfo.current-=1;
					_this.param.pageNum=_this.pageInfo.current;
					$.ajax({
						url:"http://localhost/workingHours/day",
						type:"get",
						data:_this.param,
						headers: {"token": localStorage.getItem("token")},
						dataType:"json",
						success:function(data){
							if(data.code=="0000"){
								_this.list1=data.list;	
								_this.pageInfo=data.obj;
								
							}
						}										
					})
				}else{
					alert("已经是第一页了！");
				}	
			},
			next(){
				var _this=this;
				if(_this.pageInfo.current<_this.pageInfo.pages){
					_this.pageInfo.current+=1;
					_this.param.pageNum=_this.pageInfo.current;
					$.ajax({
						url:"http://localhost/workingHours/day",
						type:"get",
						data:_this.param,
						headers: {"token": localStorage.getItem("token")},
						dataType:"json",
						success:function(data){
							if(data.code=="0000"){
								_this.list1=data.list;	
								_this.pageInfo=data.obj;
							}
						}										
					})
				}else{
					alert("已经是最后一页了！");
				}	
				},
		}	
	}
</script>

<style scoped="scoped">
	#big{
		width: 100%;
		height: 100%;
	}
	#r1{
		width: 85%;
		height: 50px;
		float: left;
		margin-top: 30px;
		background-color: #C0C0C0;
		margin-left: 100px;
		border: #000000 0px solid;
		border-radius: 10px;
	}
	#r2{
		width: 85%;
		height: 600px;
		float: left;
		margin-top: 40px;
		background-color:#C0C0C0;
		margin-left: 100px;
		border: #0000FF 0px solid;
		border-radius: 30px;
	}
	.name1{
		float: left;
		margin-left: 80px;
		text-align: center;
		margin-top: 15px;
		font-weight: bold;
		color: #000000;
	}
	#table{
		
		border: #000000 0px solid;
		float: left;
		width: 700px;
		background-color: #00B0E8;
		margin-top: 50px;
		margin-left: 340px;
		border-radius: 20px;
	}
	#table td{
		text-align: center;
		font-weight: bold;
		height: 50px;
	}
</style>